/**
 * 订单详情
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/UnusnalOrderManagement' }">异常订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>异常订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <div class="buzhou">
      <el-card class="box-card">
          <el-steps  :active=act(exOrderItem.orderStatus) finish-status="success" align-center>
            <el-step title="车辆驶入" :description=exOrderItem.startTime></el-step>
            <el-step title="车辆驶离" :description=exOrderItem.commitTime></el-step>
            <el-step title="订单支付" :description=exOrderItem.payTime></el-step>
          </el-steps>
      </el-card>
      <div>
        <span class="font-family" v-if="exOrderItem.exOrderStatus == 0">当前订单状态：异常订单-待处理</span>
        <span class="font-family" v-if="exOrderItem.exOrderStatus == 1">当前订单状态：异常订单-已处理</span>
        <span class="font-family" v-if="exOrderItem.exOrderStatus == 2">当前订单状态：异常订单-不通过</span>
        <el-button class = "button" type="danger" plain size="small ">异常处理</el-button>
      </div>
      
    </div>
    <div class="detials">
        <el-card class="box-card" >
          <div class="left"  >
            <el-descriptions  title="订单详情" :column="1" >
              <el-descriptions-item label="订单编号">{{exOrderItem.orderNo}}</el-descriptions-item>
              <el-descriptions-item label="车牌号码">{{exOrderItem.licName}}</el-descriptions-item>
              <el-descriptions-item label="绑定用户">{{exOrderItem.userName}}</el-descriptions-item>
              <el-descriptions-item label="所属路段">{{exOrderItem.secName}}</el-descriptions-item>
              <el-descriptions-item label="泊位编号">{{exOrderItem.pkno}}</el-descriptions-item>
              <el-descriptions-item label="地磁编号">{{exOrderItem.geoId}}</el-descriptions-item>
              <el-descriptions-item label="巡检员">{{exOrderItem.insName}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="right" >
              <el-descriptions  title=" " :column="1" >
              <el-descriptions-item label="驶入时间">{{exOrderItem.startTime}}</el-descriptions-item>
              <el-descriptions-item label="驶离时间">{{exOrderItem.commitTime}}</el-descriptions-item>
              <el-descriptions-item label="停车时长">{{exOrderItem.parkingTime}}</el-descriptions-item>
              <el-descriptions-item label="支付金额">{{exOrderItem.orderMoney}}</el-descriptions-item>
              <el-descriptions-item label="支付方式">{{exOrderItem.payType}}</el-descriptions-item>
              <el-descriptions-item label="支付时间">{{exOrderItem.payTime}}</el-descriptions-item>
              <el-descriptions-item label="驶入图片">
                  <el-image style="width: 100px; height: 100px; margin-left:5px" :src=exOrderItem.imgOne fit="cover"></el-image>
                  <el-image style="width: 100px; height: 100px; margin-left:5px" :src=exOrderItem.imgTwo fit="cover"></el-image>
                  <el-image style="width: 100px; height: 100px; margin-left:5px" :src=exOrderItem.imgThree fit="cover"></el-image>
              </el-descriptions-item>
              </el-descriptions>
          </div>
        </el-card>  
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false, //是显示加载
      orderNo:"",
      exOrderItem:{}
    }
  },
  methods: {
    selOrderByOrderNo() {
      this.$axios.get("/TExeceptionOrders/"+this.orderNo)
      .then(res=>{
        this.exOrderItem = res.data.data.exOrderItem;
      })
      .catch(error=>{
        console.log(error.data);
      })
    },
    act(val){
      switch(val){
          case 0:
            return 3;
          case 1:
            return 2;
          case 2:
            return 1;
          case 3:
            return 1;
          case 4:
            return 3;
          case 5:
            return 3;
          case 6:
            return 3;  
      }
    }
    
  },  
  created(){
    this.orderNo = this.$route.query.orderNo;
    this.selOrderByOrderNo();
  }

 
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
.box-card{
  margin-top: 20px;
  margin-bottom: 20px;
}
.buzhou{
  margin-bottom: 20px;
}
.font-family{
  font-family: "Microsoft YaHei";
  font-size: 16px Medium;
  color: #F56C6C;
}
.button{
  margin-left: 900px;
}
.left{
  margin-bottom: 20px;
  padding-left: 15px;
  border: 1px solid rgb(221, 210, 210);
  width: 48.5%;
  height: 340px;
  float: left;
}
.right{
  border-top: 1px solid rgb(221, 210, 210);
  border-bottom: 1px solid rgb(221, 210, 210);
  border-right: 1px solid rgb(221, 210, 210);
  padding-left: 15px;
  width: 48%;
  height: 340px;
  float: left;
}
</style>